text<template>
  <div class="boss">
    <Top subscript="0"></Top>
    <!-- 新闻总区域 -->
    <div class="news">
      <!-- 版心区域 -->
      <div class="center area-center">
        <head-page title="新 闻" id="back"></head-page>
        <!-- 商会新闻 -->
        <div class="shanghui verdana">
          <div class="title">
            <div class="yuan"></div>
            <div class="left title_word">商会新闻</div>
          </div>
          <!-- 内容区域 -->
          <div class="context verdana">
            <div class="text_top m-t-07" @click="chambertitle(LocationPCity)">
              <div class="icon">
                <!-- <img src="../../../assets/black_star.png" alt="" /> -->
              </div>
              <div class="text title_word">
                {{ LocationPCity }}
              </div>
            </div>
            <!-- <div v-else class="tac c999 m-t-10">正在定位当前省份中...</div>  -->
            <div
              class="text_top"
              v-for="(item, index) in province"
              :key="index"
              @click="chambertitle(item.text)"
            >
              <div class="icon">
                <!-- <img src="../../../assets/black_star.png" alt="" /> -->
              </div>
              <div class="text title_word">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
        <!-- 国际新闻 -->
        <div class="home">
          <div class="title">
            <div class="yuan"></div>
            <div class="left title_word verdana">国际新闻</div>
          </div>
          <div class="bottom">
            <div class="small title_word verdana" @click="news(LoPCity)">
              {{ LoPCity }}
            </div>
            <div
              class="small title_word verdana"
              v-for="(item, index) in list"
              :key="index"
              @click="newtfour(title.domestic, item.newstypeName)"
            >
              {{ item.newstypeName }}
            </div>
          </div>
        </div>
        <!-- 国际新闻 -->
        <div class="home">
          <div class="title">
            <div class="yuan"></div>
            <div class="left title_word verdana">国际新闻</div>
          </div>
          <div class="bottom">
            <div
              class="small title_word verdana"
              v-for="(item, index) in list"
              :key="index"
              @click="newtfour(title.international, item.newstypeName)"
            >
              {{ item.newstypeName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Top from "@/components/Home/TopPage.vue";

import { newsTypeName, Notice, newType } from "@/api/index";
export default {
  data() {
    return {
      list: [],
      num: [],
      province: [{ text: "全国各省" }, { text: "海外" }],
      newtype: "",
      LocationPCity: sessionStorage.getItem("province"),
      LoPCity: sessionStorage.getItem("provincesub"),
      title: {
        domestic: "国内新闻",
        international: "国际新闻",
      },
    };
  },
  components: {
    Top,
  },
  methods: {
    //新闻二级跳转四级页面(国内)
    newtfour(type, i) {
      // console.log(id);
      this.$router.push({
        path: "/newsthree/newsfour",
        query: {
          newtype: type,
          id: i,
        },
      });
    },
    news(id) {
      this.$router.push({ path: "/newsthree/newsfour", query: { id } });
    },
    //      //新闻二级跳转五级页面(国外)
    //      newtfive(id){
    //       this.$router.push({path:"/newsthree/newsfive",query:{id}})
    //      },
    //商会跳转商会标题
    chambertitle(i) {
      if (i == "定位失败,请重新定位" || i == "") {
      } else {
        this.$router.push({ path: "/newsthree/newTitle", query: { i } });
      }
    },
    back() {
      this.$router.go("-1");
    },
  },
  // 国内,国际，商会新闻
  mounted() {
    Promise.all([newsTypeName(), Notice()]).then((res) => {
      this.list = res[0].data.rows;
      this.num = res[1].data;
    }),
      //新闻的类型
      newType().then((res) => {
        if (res.data.code == 200) {
          this.newtype = res.data.data;
        }
      });
  },
};
</script>
  
  <style scoped>
/* 大盒子区域 */
.boss {
  width: 100%;
  height: 100%;
}
/* @font-face {
  font-family:宋体;
  src:url('../../../family/思源宋体L.ttf');
  
}  */
.tt {
  font-family: 宋体;
}
/* 新闻总区域 */
.news {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 版心区域 */

.top {
  width: 100%;
  height: 0.4rem;
}
/* 商会新闻 */
.shanghui {
  width: 100%;
  height: 100%;
  margin-top: 0.05rem;
}
.title {
  height: 0.3rem;
  display: flex;
  align-items: center;
}
/* 商会新闻的原点 */
.yuan {
  width: 5%;
  height: 61%;
  margin-left: 0.04rem;
  border-radius: 50%;
  background-color: black;
}
/* 商会新闻文字区域 */
.left {
  height: 100%;
  line-height: 0.3rem;
  padding-left: 0.05rem;
  text-align: center;
  color: #5c5d7b;
}
/* 商会新闻内容区域 */
.news .context {
  width: 100%;
}
.context .text_top {
  width: 100%;
  display: flex;
}
.text_top .icon {
  width: 7%;
}
.icon img {
  padding: 0.04rem 0 0 0.26rem;
  height: 0.22rem;
}

.text_top .text {
  width: 90%;
}
/* 国内新闻 */
.home {
  width: 100%;
  margin-top: 0.2rem;
}
/* 头部区域 */

.guoleft {
  width: 7%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.guoright {
  width: 85%;
  height: 100%;
  font-weight: 700;
  font-size: 0.2rem;
  line-height: 0.4rem;
  padding-left: 0.05rem;
  font-size: 0.25rem;
  text-align: center;
  color: #5c5d7b;
}

.guoleft img {
  width: 0.11rem;
}

/* 国内新闻底部区域 */
.bottom {
  width: 100%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.05rem;
  background-color: white;
}
.small {
  height: 100%;
  margin: 0 0.2rem 0 0.25rem;
  text-align: center;
  line-height: 0.33rem;
}

.map {
  width: 3rem;
  height: 3rem;
}
</style>